Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

web: Stop using <abbr /> HTML tag #1149

Merged
merged 3 commits into from
Apr 15, 2024
Merged

web: Stop using <abbr /> HTML tag #1149

merged 3 commits into from
Apr 15, 2024

Conversation

dgdavid
Copy link
Contributor

@dgdavid dgdavid commented Apr 15, 2024

Some time ago, we started using the <abbr> tag for providing a way to see the full text of an acronym or abbreviation.

However, at some point in the development of #1138, we realized that even though it is a native HTML tag, it might not be as accessible as we originally believed. In fact, the doubt arose when considering keyboard users: how can they ask the browser to show the title attribute? By default, they can't.

Having a look to tests recently made by Adrian Roselli, it can be seen that, among other issues, it's commonly problematic for keyboard and touch users. In Adrian's words:

Exposure continues to be inconsistent across browsers and assistive technologies. Some set of users will always miss some piece of information.

In addition, such an element increases the risk of overusing it by encouraging us to over explain acronyms, as @dgdavid almost did with Btrfs, which he wanted to wrap into an abbr tag. As other examples, XFS and USB are acronyms but it isn't actually helpful for readers to being able to read Extended File System and Universal Serial Bus in the context in which they are used. Similar happens with LVM: if users do not know the technology it represents, reading Logical Volume Manager hardly can help them.

Thus, it's better to stop using <abbr /> and evaluate each particular case when an acronym is added to the UI. If its long version could be helpful for users we should follow the Adrian recommendation:

Explain abbreviations, acronyms, initialisms, numeronyms, etc. on first use and then feel free to fall back to the shortened form.

It could be the case of "Full Disk Encryption (FDE)".


Click to show/hide some screenshots

Please, note that they could be a bit outdated after applying review suggestions.


Before

Storage Proposal Encryption Settings Installation Finished
Screenshot from 2024-04-15 12-05-33 Screenshot from 2024-04-15 12-05-51 Screenshot from 2024-04-15 12-06-30

After

Storage Proposal Encryption Settings Installation Finished
Screenshot from 2024-04-15 12-02-47 Screenshot from 2024-04-15 12-02-41 Screenshot from 2024-04-15 12-05-20

@coveralls
Copy link

coveralls commented Apr 15, 2024

Coverage Status

coverage: 74.819%. remained the same
when pulling 66e259c on do-not-use-abbr
into f5946ff on master.

At some point in the development of #1138, we realized that even though
it is a native HTML tag, it might not be as accessible as we originally
believed. In fact, the doubt arose when considering keyboard users: How
can they ask the browser to show the title attribute? By default, they
can't.

According to [Adrian
Roselli tests and verdict](https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html),
it is better to stop using them and

  > Explain abbreviations, acronyms, initialisms, numeronyms, etc. on
  > first use and then feel free to fall back to the shortened form.

when really needed, as could be the case of "Full Disk Encryption
(FDE)".
Copy link
Contributor

@ancorgs ancorgs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@dgdavid dgdavid merged commit 1fcc535 into master Apr 15, 2024
2 checks passed
@dgdavid dgdavid deleted the do-not-use-abbr branch April 15, 2024 11:29
@imobachgs imobachgs mentioned this pull request May 17, 2024
imobachgs added a commit that referenced this pull request May 17, 2024
Prepare for releasing Agama 8. It includes the following pull requests:

* #884
* #886
* #914
* #918
* #956
* #957
* #958
* #959
* #960
* #961
* #962
* #963
* #964
* #965
* #966
* #969
* #970
* #976
* #977
* #978
* #979
* #980
* #981
* #983
* #984
* #985
* #986
* #988
* #991
* #992
* #995
* #996
* #997
* #999
* #1003
* #1004
* #1006
* #1007
* #1008
* #1009
* #1010
* #1011
* #1012
* #1014
* #1015
* #1016
* #1017
* #1020
* #1022
* #1023
* #1024
* #1025
* #1027
* #1028
* #1029
* #1030
* #1031
* #1032
* #1033
* #1034
* #1035
* #1036
* #1038
* #1039
* #1041
* #1042
* #1043
* #1045
* #1046
* #1047
* #1048
* #1052
* #1054
* #1056
* #1057
* #1060
* #1061
* #1062
* #1063
* #1064
* #1066
* #1067
* #1068
* #1069
* #1071
* #1072
* #1073
* #1074
* #1075
* #1079
* #1080
* #1081
* #1082
* #1085
* #1086
* #1087
* #1088
* #1089
* #1090
* #1091
* #1092
* #1093
* #1094
* #1095
* #1096
* #1097
* #1098
* #1099
* #1100
* #1102
* #1103
* #1104
* #1105
* #1106
* #1109
* #1110
* #1111
* #1112
* #1114
* #1116
* #1117
* #1118
* #1119
* #1120
* #1121
* #1122
* #1123
* #1125
* #1126
* #1127
* #1128
* #1129
* #1130
* #1131
* #1132
* #1133
* #1134
* #1135
* #1136
* #1138
* #1139
* #1140
* #1141
* #1142
* #1143
* #1144
* #1145
* #1146
* #1147
* #1148
* #1149
* #1151
* #1152
* #1153
* #1154
* #1155
* #1156
* #1157
* #1158
* #1160
* #1161
* #1162
* #1163
* #1164
* #1165
* #1166
* #1167
* #1168
* #1169
* #1170
* #1171
* #1172
* #1173
* #1174
* #1175
* #1177
* #1178
* #1180
* #1181
* #1182
* #1183
* #1184
* #1185
* #1187
* #1188
* #1189
* #1190
* #1191
* #1192
* #1193
* #1194
* #1195
* #1196
* #1198
* #1199
* #1200
* #1201
* #1203
* #1204
* #1205
* #1206
* #1207
* #1208
* #1209
* #1210
* #1211
* #1212
* #1213
* #1214
* #1215
* #1216
* #1217
* #1219
* #1220
* #1221
* #1222
* #1223
* #1224
* #1225
* #1226
* #1227
* #1229
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants